<template>
    <div class="float-lyric" ref="Lyric" :class="{ bg: info.isShowBg }" @mousedown="dragLyric"
        @mouseover="info.isShowBg = true" @mouseleave="info.isShowBg = false">
        <div class="lyric">
            <div class="close">
                <!-- 关闭按钮 -->
                <span class="iconfont icon-guanbi" @click="close"></span>
            </div>
            <!-- 没有歌词时 -->
            <div class="no" v-if="music.currentLyric.length == 0">暂无歌词</div>
            <!-- 有歌词时 -->
            <div class="floatLyric" ref="floatLyric">
                <div class="lyricRow" v-for="(item, index) in music.currentLyric" :key="index"
                    :class="{ currentActive: music.currentRow == index }">
                    <span>{{ item.text.trim() }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, watch, onMounted, getCurrentInstance } from 'vue'
import { getNowLyric } from '@/api/playmusic/playmusic.js'
import { useMusicStore } from '@/store/music.js'
const instance = getCurrentInstance()
const music = useMusicStore()
const info = reactive({
    isShowBg: false,
    formatlyric: [],  //格式化后的歌词
})
//获取当前播放歌曲歌词
async function getNowLyricBy(songId) {
    let res = await getNowLyric(songId)
    if (res.data.code === 200) {
        let lyric = res.data.lrc.lyric
        formatlyricBy(lyric)
        //保存到仓库中
        music.saveCurrentLyric(info.formatlyric)
    }
}
//格式化歌词
function formatlyricBy(lyric) {
    let lyric_arr = lyric.split('\n'); //得到每行歌词字符串数组
    let length = lyric_arr.length
    for (let i = 0; i < length; i++) {
        let lyric_row = lyric_arr[i]  //获取每行歌曲
        let lyric_row_arr = lyric_row.split(']')  //分割成时间和歌词数组
        let lyric_row_text = lyric_row_arr.pop()  //利用pop方法获取歌词，最后一项
        //处理歌词时间
        lyric_row_arr.forEach(item => {
            let LyricRowObj = {}  //新创一个歌词对象
            let time_arr = item.substring(1).split(':')  //提取出每行的时间 分钟与分秒隔开
            //把时间转换成秒  row_second === currentSecond 跟这个做对比
            let row_second = time_arr[0] * 60 + Math.ceil(time_arr[1])
            if (lyric_row_text.trim().length !== 0) {  //如果歌词不为空
                LyricRowObj.time = row_second
                LyricRowObj.text = lyric_row_text
                info.formatlyric.push(LyricRowObj)  //再放入格式化数组中
            }
        });
    }
    //根据时间对歌词排序
    info.formatlyric.sort((a, b) => {
        return a.time - b.time
    })

}

//拖动歌词
function dragLyric(event) {
    ///鼠标按下得到鼠标的坐标 —— 在盒子内的坐标  instance.refs.Lyric.offsetLeft盒子中心距左边的距离
    let x = event.pageX - instance.refs.Lyric.offsetLeft
    let y = event.pageY - instance.refs.Lyric.offsetTop;
    let lyric = instance.refs.Lyric
    document.addEventListener("mousemove", move);
    function move(e) {
        // 鼠标移动，就让歌词框的坐标 设置为 :鼠标一开始坐标 减去鼠标在盒子坐标即可
        lyric.style.left = e.pageX - x + "px";
        lyric.style.top = e.pageY - y + "px";
    }
    // 鼠标松开，就停止拖拽，让鼠标移动事件解除
    document.addEventListener("mouseup", function () {
        document.removeEventListener("mousemove", move);
    });
}

//监听歌曲播放实时，用于滚动歌词
watch(() => music.currentSecond, () => {
    music.currentLyric.forEach((item, index) => {
        if (Math.ceil(music.currentSecond) >= item.time) {
            instance.refs.floatLyric.style.top = -index * 40 + 'px'
            music.currentRow = index
        }
    })
})

//监听当前播放歌曲，替换歌词
watch(() => music.nowSongDetail, () => {
    if (Object.keys(music.nowSongDetail).length !== 0) {
        info.formatlyric = []  //清空歌词数组
        getNowLyricBy(music.nowSongDetail.id)
        music.saveCurrentRow(0)  //清空当前播放的行数
    }
})

//点击关闭按钮关闭浮动歌词
function close() {
    music.isShowFloatLyric()
}


</script>

<style lang="scss" scoped>
.float-lyric {
    //设置一开始出现的位置
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 80%;
    cursor: pointer;
    z-index: 111111;
    background: rgba(153, 153, 153, 0.4);

    .lyric {
        color: #eee;
        height: 80px;
        width: 600px;
        text-align: center;
        position: relative;
        overflow-y: hidden;


        .close {
            position: absolute;
            left: 80%;
            z-index: 999999;
        }


        .floatLyric {
            //margin-top: 20px;
            position: absolute;
            width: 100%;
            top: 50px;

            .currentActive {
                font-size: 22px;
                color: var(--themeColor);
                font-weight: 700;
            }

            .lyricRow {
                height: 40px;
                line-height: 40px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;

                span {
                    font-size: 18px;
                }
            }
        }

    }
}

.bg {
    background: rgba(153, 153, 153, 0.4);
}

.no {
    font-size: 18px;
    line-height: 35px;
    color: white;
}
</style>